<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../Template/Template.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="title">
		Trang Tài khoản thành viên
  	</ui:define>

	<ui:define name="content">

		<!-- <h:outputScript library="js" name="TrangThongKe.js" target="head" /> -->
		<!-- Content -->
		<div id="MainPanel" align="left">

			<div class="ContentPart">
				<h1 class="ContentPartTitle" align="center">TRANG THÔNG TIN
					THÀNH VIÊN</h1>
			</div>
			<div class="ContentPart">
				<h3 class="ContentPartHeader">Thông tin thành viên</h3>
				<div class="ContentPartContent">
					<div class="ins">Họ tên:</div>
					<div class="info">#{trangTaiKhoanThanhVienBean.taiKhoan.hoten}</div>
					<div class="ins">Ngày sinh:</div>
					<div class="info">#{trangTaiKhoanThanhVienBean.taiKhoan.ngaysinh}</div>
					<div class="ins">Địa chỉ:</div>
					<div class="info">#{trangTaiKhoanThanhVienBean.taiKhoan.diachi}</div>
					<div class="ins">Email:</div>
					<div class="info">#{trangTaiKhoanThanhVienBean.taiKhoan.email}</div>
				</div>
			</div>
			<div class="ContentPart">
				<div class="ContentPartContent">
					<h:messages id="messageNotification" />
				</div>
			</div>
			<div class="ContentPart">
				<h3 class="ContentPartHeader">Thao tác</h3>
				<div class="ContentPartContent">
					<div id="leftAction" align="left">
						<h:commandLink immediate="true"
							action="#{trangTaiKhoanThanhVienBean.LietKeToanBoDonHang()}">
							<div class="actionWideButtonLeft" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../Images/Icon/icon_lietKeLarge.png"
									alt="Liệt kê Đơn hàng" />
								<div class="buttonCaption">Liệt kê Đơn hàng</div>
							</div>
						</h:commandLink>
						<div class="actionWideButtonLeft" align="center"
							onclick="ShowEditInfoDialog();">
							<img class="buttonImage imgNoBackgroundBorder"
								src="../Images/Icon/icon_editLarge.png"
								alt="Chỉnh sửa thông tin" />
							<div class="buttonCaption">Chỉnh sửa thông tin</div>
						</div>

						<div class="actionWideButtonLeft" align="center"
							onclick="ShowEditPasswordDialog();">
							<img class="buttonImage imgNoBackgroundBorder"
								src="../Images/Icon/icon_passwordLarge.png" alt="Đổi mật khẩu" />
							<div class="buttonCaption">Đổi mật khẩu</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ContentPart">
				<h3 class="ContentPartHeader">Danh sách Đơn đặt hàng</h3>
				<h:dataTable value="#{trangTaiKhoanThanhVienBean.lstHoaDon}"
					var="hd" styleClass="tableDulieu"
					rendered="#{not empty trangTaiKhoanThanhVienBean.lstHoaDon}"
					rowClasses="rowLe,rowChan">

					<ui:param name="index"
						value="#{trangTaiKhoanThanhVienBean.lstHoaDon.indexOf(hd)}" />

					<h:column>
						<f:facet name="header">STT</f:facet>
						<h:outputText value="#{index + 1}" />
					</h:column>
					<h:column>
						<f:facet name="header">Mã đơn</f:facet>
						<h:commandLink action="#">#{hd.mahoadon}</h:commandLink>
					</h:column>
					<!-- <h:column>
						<f:facet name="header">Người đặt</f:facet>
						<h:commandLink action="#">#{hd.taikhoan.hoten}</h:commandLink>
					</h:column> -->
					<h:column>
						<f:facet name="header">Số sản phẩm</f:facet>
						<h:outputText value="#{hd.chitiethoadons.size()}" />
					</h:column>
					<h:column>
						<f:facet name="header">Ngày xuất</f:facet>
						<h:outputText value="#{hd.ngayxuat}" />
					</h:column>
					<h:column>
						<f:facet name="header">Tổng tiền (VNĐ)</f:facet>
						<h:outputText value="#{hd.tongtien}" styleClass="tien-te">
							<f:convertNumber groupingUsed="true" pattern="#0,000" />
						</h:outputText>
					</h:column>
					<h:column>
						<f:facet name="header"> Đã duyệt</f:facet>
						<h:outputText value="Duyệt" rendered="#{qc.daduyet}" />
						<h:outputText value="Chưa" rendered="#{not qc.daduỵet}" />
					</h:column>
					<h:column>
						<f:facet name="header"> Đã xóa</f:facet>
						<h:outputText value="Xóa" rendered="#{qc.daxoa}" />
						<h:outputText value="Chưa" rendered="#{not qc.daxoa}" />
					</h:column>
				</h:dataTable>
			</div>
		</div>
		<!-- Content -->

		<!-- Dialog -->
		<h:outputScript library="js" name="TrangTaiKhoanThanhVien.js"
			target="head" />

		<!-- Sửa thông tin -->
		<div id="editInfoDialog" class="hidden">
			<p>Họ tên</p>
			<h:inputText value="#{trangTaiKhoanThanhVienBean.taiKhoan.hoten}" />
			<p>Ngày Sinh</p>
			<h:inputText value="#{trangTaiKhoanThanhVienBean.taiKhoan.ngaysinh}" />
			<p>Địa chỉ</p>
			<h:inputText value="#{trangTaiKhoanThanhVienBean.taiKhoan.diachi}" />
			<p>Email</p>
			<h:inputText value="#{trangTaiKhoanThanhVienBean.taiKhoan.email}" />
			<br />
			<!-- <p>
				<b>Ghi Chú:</b> Sẽ thay thế quảng cáo<br /> đã có sẵn ở vùng được
				chọn<br /> (nếu có).
			</p> -->
			<br />
			<h:commandButton class="dialogButton buttonLink button"
				value="Cập nhật"
				action="#{trangTaiKhoanThanhVienBean.SuaThongTin()}" />
		</div>

		<!-- đổi mật khẩu -->
		<div id="editPasswordDialog" class="hidden">
			<p>Password cũ</p>
			<h:inputSecret value="#{trangTaiKhoanThanhVienBean.passCu}" />
			<p>Password mới</p>
			<h:inputSecret value="#{trangTaiKhoanThanhVienBean.passMoiLan1}" />
			<p>Password mới lần 2</p>
			<h:inputSecret value="#{trangTaiKhoanThanhVienBean.passMoiLan2}" />
			<br />
			<p>
				<b>Ghi Chú:</b> Mật khẩu có ít nhất <br /> 5 kí tự.
			</p>
			<br />
			<h:commandButton class="dialogButton buttonLink button"
				value="Thay đổi" action="#{trangTaiKhoanThanhVienBean.DoiMatKhau()}" />
		</div>
		<!-- Dialog -->
	</ui:define>
</ui:composition>